<template>
	<dl class="stat_data">
		<dt><svg-icon :icon-name="icon" size="32"></svg-icon></dt>
		<dd>
			<h5>{{ title }}</h5>
			<p>
				<font size="5">{{ value }}</font>
				<span>{{ unit }}</span>
			</p>
		</dd>
	</dl>
</template>

<script>
export default {
	props: {
		title: String,
		value: [String, Number],
		unit: String,
		icon: String
	}
};
</script>

<style lang="scss" scoped>
.stat_data {
	display: flex;
	flex: 1;
	margin: 16px;
	overflow: hidden;
	position: relative;
	&::before {
		position: absolute;
		top: 0;
		left: 0;
		width: 56px;
		height: 56px;
		content: '';
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.1);
	}
	dt {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		flex-shrink: 0;
		fill: #fff;
		mask-image: linear-gradient(-45deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 75%);
	}
	dd {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-left: 16px;
		color: #fff;
		h5 {
			line-height: 1;
			margin-bottom: 6px;
			font-weight: normal;
		}
		p {
			display: flex;
			align-items: baseline;
		}
		font,
		span {
			display: block;
			line-height: 1;
		}
		span {
			margin-left: 6px;
		}
	}
}
</style>
